import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Link, useNavigate } from 'react-router-dom'
function NotFound() {
  const timer = useRef()
  const navigate = useNavigate()
  const [count, setCount] = useState(10)
  useEffect(() => {
    timer.current = setInterval(() => {
      if (count === 1) {
        navigate('/')
      }
      setCount((count) => count - 1)
    }, 1000)
    return () => {
      clearInterval(timer.current)
    }
  }, [])
  useEffect(() => {
    if (count === 0) {
      navigate('/')
    }
  }, [count])
  return (
    <div className={styles.root}>
      <h1>对不起，您访问的页面不存在~</h1>
      <p>
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/home">首页</Link>）
      </p>
    </div>
  )
}

export default NotFound
